<template>
  <div class='InterfaceOrderWrapper'>
    <second-top></second-top>
    <div class="confirmTitle">
        <div class="confirmTitleMiddle">
            <div class="confirmCase">
                确认订单
            </div>
        </div>
    </div>
    <div class="stepsContent">
        <div class="stepsMiddle">
            <div class="stepsWrapper">
                <el-steps :active="1">
                    <el-step title="步骤 1" icon="el-icon-edit"></el-step>
                    <el-step title="步骤 2" icon="el-icon-upload"></el-step>
                    <el-step title="步骤 3" icon="el-icon-picture"></el-step>
                </el-steps>
            </div>
            <div class="orderTable">
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="interface"
                        label="接口"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="mealType"
                        label="套餐类型"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="buyType"
                        label="购买类型">
                    </el-table-column>
                    <el-table-column
                        prop="month"
                        label="订购月数">
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="单价">
                    </el-table-column>
                </el-table>
            </div>
            <div class="orderText">
                预计开始生效：<span>今天</span> 生效周期：<span>1个月</span> 订单总价：<span>130.00</span>
            </div>
        </div>
        <div class="payButton">
            <el-checkbox v-model="checked">同意使用协议</el-checkbox><button class="btn">去支付</button>
        </div>
    </div>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import SecondTop from '@/components/top/secondtop.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'InterfaceOrder',
  data () {
    return {
      tableData: [
        {
          interface: '2016-05-02',
          mealType: '王小虎',
          buyType: '上海市普陀区金沙江路 1518 弄',
          month: '5',
          price: '100元'
        }
      ],
      checked: true
    }
  },
  mounted () {
  },
  components: {
    SecondTop,
    Footer
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.InterfaceOrderWrapper {
    background-color white
    .confirmTitle {
        border-bottom-style solid
        border-width: 1px
        border-color: #E4E4E4
        .confirmTitleMiddle {
            padding 20px 20px
            width 1200px
            margin 0 auto
            .confirmCase {
                padding-left 10px
                border-left-style solid
                border-width: 4px
                border-color: #65acda
            }
        }
    }
    .stepsContent {
        .stepsMiddle {
            background-color white
            width 1200px
            margin 0 auto
            margin-top 40px
            .orderText {
                text-align right
                font-size 14px
                margin-top 20px
                span {
                    color $color-theme
                    font-size 20px
                }
            }
            padding-bottom 20px
            border-bottom-style solid
            border-width: 1px
            border-color: #E4E4E4
            .orderTable {
                margin-top 40px
                border-top-style solid
                border-left-style solid
                border-right-style solid
                border-width: 1px
                border-color: #E4E4E4
            }
        }
        .payButton {
            text-align right
            width 1200px
            margin 0 auto
            .btn {
                margin-left 10px
                margin-top 30px
                color: white;
                padding 10px 15px
                border: solid 1px #F7BA2A;
                border-radius 3px
                background-color: #F7BA2A;
                &:focus {
                outline: none
                }
            }
        }
    }
    .footer {
        position fixed
        bottom 0
        width 100%
    }
}
</style>
